<template>
  <div class="RegisterList">
    <!-- 筛选 -->
    <div class="search_content">
      <div class="top_title">
        <div class="top_title_back" @click="$router.go(-1)"><i class="iconfont icon-back"></i></div>
        <div class="top_title_val">
          {{ $route.meta.title }}
        </div>
        <div class="top_title_right" @click="onClickRight">草稿箱{{ draftNum > 0 ? `(${draftNum})` : '' }}</div>
      </div>
      <!--      <van-nav-bar
        :title="$route.meta.title"
        left-text="返回"
        right-text="草稿箱(1)"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />-->
      <van-search v-model="requestParams.codeNo" placeholder="请输入车架号或者车牌号" shape="round" @search="initData" @clear="clearSearch" />
      <div class="search_item">
        <van-dropdown-menu :close-on-click-outside="false">
          <van-dropdown-item title="保险公司" ref="insureRef">
            <div class="searchbox">
              <div class="title">推修保险公司</div>
              <div class="insureList">
                <div
                  class="insure_item"
                  :class="item.check ? 'active' : ''"
                  v-for="(item, index) in insureList"
                  :key="index"
                  @click="handleSelect(index, 'insureList')"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="insureBtn">
                <van-button size="small" type="warning" class="resetBtn" @click="handleReset(insureList)"> 重置 </van-button>
                <van-button size="small" type="info" class="confirmBtn" @click="onConfirm('insureRef')"> 确认 </van-button>
              </div>
            </div>
          </van-dropdown-item>

          <van-dropdown-item title="状态" ref="statusRef">
            <div class="searchbox">
              <div class="insureList">
                <div
                  class="insure_item"
                  :class="item.check ? 'active' : ''"
                  v-for="(item, index) in insureBillStatusList"
                  :key="index"
                  @click="handleSelect(index, 'insureBillStatusList')"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="insureBtn">
                <van-button size="small" type="warning" class="resetBtn" @click="handleReset(insureBillStatusList)"> 重置 </van-button>
                <van-button size="small" type="info" class="confirmBtn" @click="onConfirm('statusRef')"> 确认 </van-button>
              </div>
            </div>
          </van-dropdown-item>

          <van-dropdown-item title="筛选" ref="accidentRef">
            <div class="searchbox">
              <div class="title">事故类型</div>
              <div class="insureList">
                <div
                  class="insure_item"
                  :class="item.check ? 'active' : ''"
                  v-for="(item, index) in accidentTypeList"
                  :key="index"
                  @click="handleSelect(index, 'accidentTypeList')"
                >
                  {{ item.name }}
                </div>
              </div>

              <div class="title">现场服务类型</div>
              <div class="insureList">
                <div
                  class="insure_item"
                  :class="index == sceneServeTypeIndex ? 'active' : ''"
                  v-for="(item, index) in sceneServeTypeList"
                  :key="index"
                  @click="sceneServeTypeIndex = index"
                >
                  {{ item.name }}
                </div>
              </div>

              <div class="title">是否推修</div>
              <div class="insureList">
                <div
                  class="insure_item"
                  :class="index == pushIndex ? 'active' : ''"
                  v-for="(item, index) in pushList"
                  :key="index"
                  @click="pushIndex = index"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="insureList">
                <van-field
                  v-model="requestParams.creatorName"
                  label="外服登记人"
                  :placeholder="'请选择'"
                  input-align="right"
                  readonly
                  right-icon="arrow"
                  @click="handleSelectPicker('creator', 'creatorName')"
                />
              </div>
              <div class="title">出险日期</div>
              <div class="insureList">
                <van-field
                  v-model="requestParams.accidentStartDate"
                  label="出险开始时间"
                  :placeholder="'请选择'"
                  input-align="right"
                  readonly
                  right-icon="arrow"
                  @click="handleSelectTime('accidentStartDate')"
                />
                <van-field
                  v-model="requestParams.accidentEndDate"
                  label="出险结束时间"
                  :placeholder="'请选择'"
                  input-align="right"
                  readonly
                  right-icon="arrow"
                  @click="handleSelectTime('accidentEndDate')"
                />
              </div>

              <div class="title">登记日期</div>
              <div class="insureList">
                <van-field
                  v-model="requestParams.resStartTime"
                  label="登记开始时间"
                  :placeholder="'请选择'"
                  input-align="right"
                  readonly
                  right-icon="arrow"
                  @click="handleSelectTime('resStartTime')"
                />
                <van-field
                  v-model="requestParams.resEndTime"
                  label="登记结束时间"
                  :placeholder="'请选择'"
                  input-align="right"
                  readonly
                  right-icon="arrow"
                  @click="handleSelectTime('resEndTime')"
                />
              </div>
              <van-field name="radio" label="是否外服登记" input-align="right" label-width="170px">
                <template #input>
                  <van-radio-group v-model="requestParams.isZlAddNew" direction="horizontal">
                    <van-radio :name="item.value" v-for="(item, index) in isflagList" :key="index">
                      {{ item.name }}
                    </van-radio>
                  </van-radio-group>
                </template>
              </van-field>

              <div class="insureBtn">
                <van-button size="small" type="warning" class="resetBtn" @click="handleAccidentReset(accidentTypeList)"> 重置 </van-button>
                <van-button size="small" type="info" class="confirmBtn" @click="onConfirm('accidentRef')"> 确认 </van-button>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>

        <van-popup v-model="showPickerDate" position="bottom">
          <van-datetime-picker v-model="currentDate" type="date" @cancel="handleOnCancelDate" @confirm="handleOnConfirmDate" :formatter="formatter" />
        </van-popup>
        <van-popup v-model="showPickerDate1" position="bottom">
          <van-datetime-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" :formatter="formatter" />
        </van-popup>

        <van-popup v-model="showSelectPicker" position="bottom">
          <van-field name="模糊查询" input-align="left" v-model="likeWho" label="模糊查询" placeholder="请输入模糊查询关键词" />
          <van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false" value-key="name" />
        </van-popup>
      </div>
    </div>

    <!-- 列表 -->
    <keep-alive>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
          v-if="recordList && recordList.length != 0"
          :immediate-check="false"
        >
          <div class="orderList">
            <div class="orderItem" v-for="(item, index) in recordList" :key="index" @click="goDetail(item)">
              <div class="orderItem_header">
                <div class="orderItem_lt">
                  <div class="carNo">
                    {{ item.carNo }}
                    <van-image
                      v-if="item.customerPhone.length > 0"
                      @click.stop="handleTel(item.customerPhone)"
                      width="24"
                      height="24"
                      :src="require('@/assets/images/tel_icon.png')"
                    />
                  </div>
                  <div :style="{backgroundColor: item.sceneServeTypeName=='事故服务'? '#E51C23' : '#88CF65'}" class="sceneServeType">
                    {{ item.sceneServeTypeName }}
                  </div>
                </div>
                <div class="orderItem_rt">
                  <div class="carStatus">{{ item.billStatus }}</div>
                  <!--                  <div class="txt">-->
                  <!--                    <a @click="handleTel(item.customerPhone)">联系车主</a>-->
                  <!--                  </div>-->
                </div>
              </div>
              <div class="orderItem_content">
                <div class="orderItem_data">
                  <i class="iconfont icon-gw"></i>
                  <div class="txt">
                    {{ item.ogPsnName && JSON.stringify(item.ogPsnName) != '{}' ? item.ogPsnName : '-' }}
                  </div>
                </div>
                <div class="orderItem_data">
                  <i class="iconfont icon-fixCenter"></i>
                  <div class="txt">
                    {{ item.fixCenterName ? item.fixCenterName : '-' }}
                  </div>
                </div>
                <div class="orderItem_data">
                  <i class="iconfont icon-date"></i>
                  <div class="txt">{{ item.bizDate ? item.bizDate : '-' }}</div>
                </div>
                <div class="orderItem_data">
                  <i class="iconfont icon-address"></i>
                  <div class="txt">
                    {{ item.accidentAddress && JSON.stringify(item.accidentAddress) != '{}' ? item.accidentAddress : '-' }}
                  </div>
                </div>
              </div>
              <van-grid :border="false" v-if="item.attach && item.attach.length > 0">
                <van-grid-item v-for="(obj, index) in item.attach" :key="`attach${index}`">
                  <van-image
                    width="1.08rem"
                    height="1.08rem"
                    fit="cover"
                    :src="`${baseUrl}/proxy/cam/file/download?attachId=${obj.attachId}&attachName=${obj.attachName}`"
                    @click.stop="preImg(`${baseUrl}/proxy/cam/file/download?attachId=${obj.attachId}&attachName=${obj.attachName}`)"
                  />
                </van-grid-item>
                <van-grid-item @click.stop="fileManage(item)">
                  <van-image :src="require('@/assets/images/double-right.png')" />
                </van-grid-item>
              </van-grid>
              <van-grid :border="false" v-if="!item.attach || item.attach.length == 0">
                <div style="display: contents;" @click.stop="fileManage(item)">
                  <div style="align-self: center;font-size: 12px;">点击上传图片</div>
                  <van-grid-item>
                    <van-image :src="require('@/assets/images/double-right.png')" />
                  </van-grid-item>
                </div>

              </van-grid>
            </div>
          </div>
        </van-list>

        <van-empty class="noContent" description="暂无数据" v-else />
      </van-pull-refresh>
    </keep-alive>

    <div class="addBtn" v-if="isEdit">
      <div class="orderItem_filebox" @click="handleAdd">
        <van-image :src="require('@/assets/images/add_a_photo.png')" />
        新增
      </div>
    </div>

    <!-- <div class='config' @click='goSetting("3")'>
      <van-image :src="require('@/assets/images/if-options.png')" />
    </div> -->

    <div class="loading" v-if="loading">
      <van-loading size="30px" class="loadbox" color="#fff" text-color="#fff"> 加载中... </van-loading>
      <div class="mask"></div>
    </div>
  </div>
</template>

<script>
import outAPi from '@/api/outAPi'
import commonApi from '@/api/commonApi'
import repairApi from '@/api/repairApi'
import { getCookies, isPhone } from '@/utils/util.js'
import { ImagePreview } from 'vant'

const base_url = process.env.BASE_API

export default {
  nama: 'registerList',
  components: {},
  data() {
    return {
      baseUrl: base_url,

      insureList: [],

      pushList: [
        { name: '是', code: 1, check: false },
        { name: '否', code: 0, check: false },
      ],
      pushIndex: null,
      sceneServeTypeIndex: null,
      showPickerDate: false,
      showPickerDate1: false,
      currentDate: new Date(),
      currentDate1: new Date(),
      bgDate: '', // 查询时间
      endDate: '',
      recordList: [],
      requestParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        accidentStartDate: '', //出现开始时间 yyyy-MM-dd
        accidentEndDate: '', //出现结束时间 yyyy-MM-dd
        insCompId: '', //保险公司ID值
        accidentType: '', //事故类型
        billStatus: '', //事故跟踪单状态
        isRepaired: '', //是否推修，1为是，2为否
        userId: getCookies('userId'), //用户ID，必填，String
        resStartTime: '',
        resEndTime: '',
        isZlAddNew: 1,
        creatorName: '',
        creator: '',
      },
      // 分页参数
      loading: false,
      finished: false,
      refreshing: false,
      isLoadData: false,

      insuranceList: [], //保险类型
      insureTypeList: [], //保险分类
      insureBillStatusList: [], //保单单据状态
      accidentTypeList: [], //事故类型
      sceneServeTypeList: [], //现场服务类型
      isEdit: isPhone(),
      creatorList: [],
      likeWho: '',
      likeWhoField: '',
      showSelectPicker: false,
      columns: [],
      timeField: '',
      isflagList: [
        { name: '是', value: 1 },
        { name: '否', value: 0 },
      ],
      userInfo: JSON.parse(getCookies('userInfo')),
      registerParmas: {},
      draftNum: 0,
    }
  },
  watch: {
    likeWho: function (nval, oval) {
      if (nval) {
        let newArr = this.creatorList.filter((item) => {
          return item.name.indexOf(nval) > -1
        })
        console.log(newArr)
        this.columns = newArr
      } else {
        this.columns = this.creatorList
      }
    },
  },
  activated() {
    // if (localStorage.getItem('registerParmas')) {
    // } else {
    //   this.initData()
    // }
  },
  mounted() {
    // if (localStorage.getItem('registerParmas')) {
    //   this.registerParmas = JSON.parse(localStorage.getItem('registerParmas'))
    //   this.requestParams.resStartTime = this.registerParmas.resStartTime
    //   this.requestParams.resEndTime = this.registerParmas.resEndTime
    //   this.requestParams.creator = this.registerParmas.creator
    // } else {
    //   this.initData()
    // }
    this.initData()
    this.draftListNum()
    this.getInsureType()
    this.getInsurance()
    this.getInsureBillStatus()
    this.getInsComList()
    this.getAccidentType()
    this.getSceneServeType()

    this.getAccidentOrgPsnList()
  },

  methods: {
    // 获取草稿条数
    draftListNum() {
      repairApi.listNum().then((res) => {
        this.draftNum = res
      })
    },
    // 初始化列表
    initData() {
      this.requestParams.pageNo = 1
      this.loadData()
    },
    // 获取列表
    loadData() {
      if (this.isLoadData) return
      this.isLoadData = true
      this.loading = true
      this.finished = false
      // console.log(this.isLoadData);
      outAPi
        .queyCarAccidentTrackingBill({ ...this.requestParams })
        .then((res) => {
          if (res) {
            if (this.requestParams.pageNo == 1) {
              this.recordList = res.data || []
            } else {
              this.recordList = this.recordList.concat(res.data || [])
            }
            this.requestParams.pageNo += 1

            if (res.data.length < 10) {
              this.finished = true
              this.isLoadData = true
            }
            this.isLoadData = false
            this.loading = false
          }
        })
        .catch((res) => {
          this.isLoadData = false
          this.loading = false
        })
    },
    // 下拉刷新
    onRefresh() {
      console.info('refresh')
      // 清空列表数据
      this.recordList = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.refreshing = false
      this.initData()
    },

    // 获取保险分类
    getInsureType() {
      commonApi.getEnums({ key: 'insureType', userId: this.requestParams.userId }).then((res) => {
        if (res.data) {
          this.insureTypeList = res.data
        }
      })
    },
    // 获取保险类型
    getInsurance() {
      commonApi.getEnums({ key: 'insurance', userId: this.requestParams.userId }).then((res) => {
        if (res.data) {
          this.insuranceList = res.data
        }
      })
    },
    // 获取保单单据状态
    getInsureBillStatus() {
      commonApi
        .getEnums({
          key: 'carAccidentBillStatus',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.insureBillStatusList = this.formatCheckData(res.data)
          }
        })
    },
    // 获取事故类型
    getAccidentType() {
      commonApi
        .getEnums({
          key: 'accidentType',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.accidentTypeList = this.formatCheckData(res.data)
          }
        })
    },
    getSceneServeType() {
      this.sceneServeTypeList = []
      commonApi
        .getEnums({
          key: 'sceneServeType',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.sceneServeTypeList = res.data
          }
        })
    },
    // 保险公司
    getInsComList() {
      commonApi
        .getBaseCode({
          key: '保险公司',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            const filteredArray = res.data.filter((item, index, self) => {
              // 使用findIndex查找当前项在数组中第一次出现的索引
              const firstIndex = self.findIndex((obj) => obj.name === item.name && obj.billId === item.billId)

              // 如果当前项就是第一次出现的项，则返回true，保留在结果数组中
              return index === firstIndex
            })
            this.insureList = this.formatCheckData(filteredArray)
            // this.insureList = this.formatCheckData(res.data)
          }
        })
    },
    // 格式化多选数据
    formatCheckData(data) {
      data.forEach((item) => {
        item.check = false
      })
      return data
    },

    handleSelect(index, listKey) {
      this[listKey][index].check = !this[listKey][index].check
    },
    // 是否推修
    handlePushSelect(index) {
      this.pushIndex = index
    },
    handleReset(data) {
      data.forEach((item) => {
        item.check = false
      })
    },
    // 筛选重置
    handleAccidentReset(data) {
      data.forEach((item) => {
        item.check = false
      })
      this.pushIndex = null
      this.requestParams.accidentStartDate = null
      this.requestParams.accidentEndDate = null
      this.requestParams.creator = ''
      this.requestParams.creatorName = ''
      this.requestParams.resStartTime = ''
      this.requestParams.resEndTime = ''
    },
    onConfirm(ref) {
      let arr = []
      if (ref == 'insureRef') {
        this.insureList.forEach((item, index) => {
          if (item.check) {
            arr.push(item.billId)
          }
        })
        this.requestParams.insCompId = arr.join(';')
      }
      if (ref == 'statusRef') {
        this.insureBillStatusList.forEach((item, index) => {
          if (item.check) {
            arr.push(item.value)
          }
        })
        this.requestParams.billStatus = arr.join(';')
      }
      if (ref == 'accidentRef') {
        this.accidentTypeList.forEach((item, index) => {
          if (item.check) {
            arr.push(item.value)
          }
        })
        this.requestParams.isRepaired = this.pushIndex ? this.pushList[this.pushIndex].code : ''
        this.requestParams.sceneServeType = this.sceneServeTypeIndex != null ? this.sceneServeTypeList[this.sceneServeTypeIndex].value : ''
        this.requestParams.accidentType = arr.join(';')
      }
      this.initData()
      this.$refs[ref].toggle()
    },
    onConfirmDate() {
      this.requestParams.accidentStartDate = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
      this.onCancelDate()
    },
    onConfirmDate1() {
      this.requestParams.accidentEndDate = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
      this.onCancelDate1()
    },
    onCancelDate() {
      this.showPickerDate = false
    },
    onCancelDate1() {
      this.showPickerDate1 = false
    },
    // 日期组件自定义格式
    formatter(type, value) {
      if (type === 'year') {
        this.value1 = value // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
      this.value3 = value
      return `${value}日`
    },

    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val
        })
        if (obj.length > 0) {
          return obj[0].name
        }
      }
      return null
    },
    fileManage(data) {
      this.$router.push({
        path: '/fileMange',
        query: { billId: data.billId, billType: 'CarAccidentTrackjngBill' },
      })
    },
    goSetting(data) {
      this.$router.push({
        path: '/configSetting',
        query: { id: data.billId },
      })
    },
    goDetail(data) {
      // this.$router.push('/registerEditV2?isDetail=1&id='+data.billId)
      this.$router.push({
        name: 'registerEditV2',
        params: {
          id: data.billId,
          isDetail: 1,
          showBillStatus: true,
          showTabs: true
        },
      })
    },
    handleAdd() {
      this.$router.push({ path: '/quickEdit' })
    },
    clearSearch() {
      this.requestParams.codeNo = ''
      this.initData()
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    handleSearchReset() {
      this.pushIndex = null
      this.insuranceList.forEach((item) => {
        item.check = false
      })
      this.insureTypeList.forEach((item) => {
        item.check = false
      })
      this.insureBillStatusList.forEach((item) => {
        item.check = false
      })
      this.accidentTypeList.forEach((item) => {
        item.check = false
      })
      this.requestParams = {
        ...this.requestParams,
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        accidentStartDate: '', //出现开始时间 yyyy-MM-dd
        accidentEndDate: '', //出现结束时间 yyyy-MM-dd
        insCompId: '', //保险公司ID值
        accidentType: '', //事故类型
        billStatus: '', //事故跟踪单状态
        isRepaired: '', //是否推修，1为是，2为否
      }
    },
    onClickLeft() {
      localStorage.setItem('skipUrl', '')
      localStorage.setItem('registerParmas', '')
      this.handleSearchReset()
      this.$router.push('/home')
    },
    onClickRight() {
      this.$router.push('/draftList')
    },
    // 外服人员
    getAccidentOrgPsnList() {
      outAPi.getAccidentOrgPsnList({}).then((res) => {
        if (res.data) {
          let name = ''
          res.data.forEach((item) => {
            if (item.billId == this.requestParams.creator) {
              this.requestParams.creatorName = item.name
              this.requestParams.creator = item.billId
            }
          })
          // if (this.userInfo && this.userInfo.kduserid == this.requestParams.creator) {
          //   name = this.userInfo.kdusername
          //   res.data &&
          //     res.data.forEach((item) => {
          //       if (item.name == name) {
          //         this.requestParams.creatorName = item.name
          //         this.requestParams.creator = item.billId
          //       }
          //     })
          // }

          this.creatorList = res.data
          this.initData()
        }
      })
    },

    // 选择下拉
    handleSelectPicker(field, fieldName) {
      if (field == 'creator') {
        this.columns = this.creatorList
      }
      this.field = field
      this.fieldName = fieldName
      this.likeWhoField = field
      this.showSelectPicker = true
    },
    // 选择下拉确认
    handleSelectConfirm(value, index) {
      this.requestParams[this.field] = value ? value.billId : ''
      this.requestParams[this.fieldName] = value ? value.name : ''
      console.log(value)
      this.showSelectPicker = false
      this.likeWho = ''
    },
    // 时间筛选
    handleSelectTime(field) {
      this.timeField = field
      this.showPickerDate = true
    },
    // 时间确认
    handleOnConfirmDate() {
      this.requestParams[this.timeField] = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
      this.onCancelDate()
    },
    handleOnCancelDate() {
      this.showPickerDate = false
    },
    // 图片预览
    preImg(url) {
      let arr = [url]

      ImagePreview({
        images: arr,
        showIndex: true,
        loop: false,
      })
    },
  },
}
</script>

<style lang="less" scoped="">
.RegisterList {
  background: #f3f3f3;
  /deep/ .van-grid-item:last-child {
    flex-basis: 11% !important;
    .van-grid-item__content {
      padding-left: 0;
    }
  }
  /deep/ .van-grid-item {
    flex-basis: 0 !important;
  }

  .config {
    position: fixed;
    right: 0;
    bottom: 2.8rem;
    width: 54px;
    height: 47px;
    border-radius: 20px 0 0 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .van-image {
      height: 30px;
      width: 30px;
    }
  }
}

.search_content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;
    background: url(../../assets/images/title_bg.png) no-repeat;
    background-size: 100%;
    background-attachment: fixed;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }

    .top_title_right {
      position: absolute;
      right: 10px;
      top: 0;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }
  }
}
.searchbox {
  padding: 0.3rem;
  .title {
    font-size: 0.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.4rem;
    padding-top: 0.2rem;
  }
  .insureList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .insure_item {
      text-align: center;
      padding: 0.15rem 0rem;
      width: 30%;
      box-sizing: border-box;
      font-size: 0.28rem;
      border-radius: 3px;
      color: #666;
      margin-bottom: 0.2rem;
      margin-right: 5%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active {
        box-shadow: 0px 0px 3px 0px #f65e07;
        color: #f65e07;
      }
    }
  }
  .insureBtn {
    display: flex;
    justify-content: flex-end;

    margin-top: 0.4rem;
    .resetBtn {
      padding: 0 0.4rem;
      margin-right: 0.2rem;
    }
    .confirmBtn {
      padding: 0 0.4rem;
    }
  }
}

.orderList {
  padding-top: 3rem;
  margin: 0.3rem;
  overflow: hidden;
  .orderItem {
    padding: 0.3rem;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      .orderItem_lt {
        align-items: center;
        align-self: center;

        .carNo {
          font-size: 0.3rem;
          color: #333;
          font-weight: bold;
          /deep/ .van-image {
            vertical-align: middle;
          }
        }
        .sceneServeType {
          margin-top: 5px;
          color: white;
          text-align: center;
          width: fit-content;
          font-size: 12px;
          border-radius: 5px;
          padding: 3px 8px;
        }
      }
      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        .carStatus {
          background: #3975c6;
          color: #fff;
          padding: 0.1rem 0.37rem;
          font-size: 0.24rem;
          text-align: center;
          border-radius: 3px;
        }
      }
    }
    .orderItem_content {
      .orderItem_data {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        color: #333;
        .iconfont {
          font-size: 0.4rem;
          margin-right: 0.2rem;
          color: #999;
        }
        .orderItem_label {
          font-size: 0.28rem;
          margin-right: 0.2rem;
          color: #333;
        }
      }
    }
    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-file {
        font-size: 0.34rem;
        color: #333;
        margin-right: 0.1rem;
      }
    }
  }
}
.addBtn {
  position: fixed;
  bottom: 0.8rem;
  width: 100%;
  z-index: 1;
  .orderItem_filebox {
    width: 2.8rem;
    margin: auto;
    text-align: center;
    font-size: 0.35rem;
    background: #409eff;
    color: #fff;
    padding: 0.25rem 0rem;
    border-radius: 50px;
    /deep/ .van-image {
      vertical-align: sub;
    }
  }
}
.noContent {
  margin-top: 2rem;
}
</style>
